<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="formData">

      <el-row>
        <el-col :span="8">
          <el-form-item label="地区" type="area" prop="area">
<!--            <el-input v-model="formData.area"/>-->
            <AreaData @change="test" width="100%"></AreaData>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="车辆类型" type="car_type" prop="car_type">
            <CarTypeSelect v-model="formData.car_type"></CarTypeSelect>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="搬家时间" type="move_date" prop="move_date">
            <el-date-picker type="datetime" placeholder="选择日期" v-model="formData.move_date" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="联系人" type="contact" prop="contact">
            <el-input v-model="formData.contact"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="手机号" type="phone" prop="phone">
            <el-input v-model="formData.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="用户名" type="username" prop="username">
            <el-input v-model="formData.username"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="2" :offset="8">
          <el-button type="primary" @click="handleAdd()">添加搬家信息</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>

</template>

<script>
import CarTypeSelect from "@/components/CarTypeSelect";
import {addMove} from "@/api/move";
import AreaData from "@/components/AreaData";

export default {
  name: "MoveHomeAdd",
  components: {AreaData, CarTypeSelect},
  data() {
    return {
      formData:{
        area:'',
        car_type:'',
        move_date:'',
        contact:'',
        phone:'',
        status:0,
        username:''
      },
      rules:{
        area:[
          {required:true,message:'请选择地区',trigger:'change'}
        ],
        car_type:[
          {required:true,message:'请选择车辆类型',trigger:'change'}
        ],
        move_date:[
          {type:'date',message:'请选择搬家日期',required:true,trigger:'change'}
        ],
        contact:[
          {required:true,message:'联系人不能为空',trigger:'blur'}
        ],
        phone:[
          {required:true,message:'手机号不能为空',trigger:'blur'}
        ],
        username:[
          {require:true,message:'用户名不能为空',trigger:'blur'}
        ]
      }
    }
  },
  methods :{
    handleAdd(){
      addMove(this.formData).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error("增加失败")
        }
      })
    },
    test(e){
      this.formData.area = e
    }
  }
}
</script>

<style scoped>

</style>
